<template>
    <div class="songlist">
        <div class="song-list">
            <SongListItem v-for="item in playlists" :key="item.id" :song="item"/>
        </div>
    </div>
</template>
<script>
import SongListItem from './SongListItem.vue'
export default {
    name: "",
    props: {
        playlists: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    created() {
    },
    data() {
        return {};
    },
    methods: {},
    components: { SongListItem }
}
</script>
<style lang="less" scoped>
    .song-list{
        display: grid;
        justify-content: space-between;
        align-content: space-between;
        grid-template-rows: repeat(8, auto-fill);
        grid-template-columns: repeat(6, 15%);
    }
</style>